

<template>
  <el-dialog
      v-model="dialogVisible"
      title="外拨详情"
      :close-on-click-modal="false"
      width="80%"
      @close="handleDialogClose"
  >
    <div  v-loading="loading">
      <div class="dialog-box">
        <div>
          <div class="dialog-one-title">项目信息</div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="项目名称" max-width="300">
              {{projectInfo.name}}
            </el-descriptions-item>
            <el-descriptions-item label="批准经费">{{ turnWanyuan(projectInfo.feeAuthorize) }}</el-descriptions-item>
            <el-descriptions-item label="负责人">{{ projectInfo.chargerName }}</el-descriptions-item>
            <el-descriptions-item label="所属单位">{{ projectInfo.unitName }}</el-descriptions-item>
            <el-descriptions-item label="开始日期">{{ projectInfo.beginDate }}</el-descriptions-item>
            <el-descriptions-item label="计划完成日期">{{ projectInfo.planEndDate }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
                  @sort-change="handleSortChange">
          <el-table-column label="项目名称">
            <template #default="scope">
              {{ scope.row.projectName }}
            </template>
          </el-table-column>
          <el-table-column prop="chargerName" label="负责人" sortable="p.charger_name"></el-table-column>
          <el-table-column prop="outboundFee" label="申请外拨金额">
            <template #default="scope">
              {{turnWanyuan(scope.row.outboundFee)}}
            </template>
          </el-table-column>
          <el-table-column prop="outbounddate" label="申请外拨日期" sortable="b.outbounddate"></el-table-column>
          <el-table-column prop="unitName" label="所属单位" ></el-table-column>
          <el-table-column sortable="b.checkstatus" prop="checkstatus" label="审核状态">
            <template #default="{ row }">
              <CommonLabel :dataList="checkStatusList" valueKey="dictValue" labelKey="dictLabel"
                           :value="row.checkstatus" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">

              <!-- 科研人员 -->
              <el-button v-if="verifyRoleType.isKyry() && (scope.row.checkstatus == -1 || scope.row.checkstatus == 3)" plain type="primary" size="small" @click="handleEdit(scope.row)">
                编辑
              </el-button>
              <el-button v-if="verifyRoleType.isKyry() && (scope.row.checkstatus == -1 || scope.row.checkstatus == 3)" type="danger" plain size="small" @click="handleDelete(scope.row)">
                删除
              </el-button>
              <el-button v-if="verifyRoleType.isKyry() && scope.row.checkstatus == 2" @click="JfwbDetailsBtn(scope.row)" plain type="primary" size="small">
                查看
              </el-button>
              <el-button v-if="verifyRoleType.isKyry() && scope.row.checkstatus == 1" plain type="warning" size="small" @click="handleCancel(scope.row)">
                撤销
              </el-button>

              <!-- 科研秘书 -->
              <el-button v-if="verifyRoleType.isKyms() && (scope.row.checkstatus == -1 || scope.row.checkstatus == 3)" plain type="primary" size="small" @click="handleEdit(scope.row, '编辑1')">
                编辑
              </el-button>
              <el-button v-if="verifyRoleType.isKyms() && (scope.row.checkstatus == -1 || scope.row.checkstatus == 3)" type="danger" plain size="small" @click="handleDelete(scope.row)">
                删除
              </el-button>
              <el-button v-if="verifyRoleType.isKyms() && scope.row.checkstatus == 1" plain type="primary" size="small" @click="handleEdit(scope.row, '编辑2')">
                编辑
              </el-button>
              <el-button v-if="verifyRoleType.isKyms() && scope.row.checkstatus == 1 && scope.row.isAuditor" @click="openauditBtn(scope.row)" plain type="success" size="small">
                审核
              </el-button>
              <el-button v-if="verifyRoleType.isKyms() && scope.row.checkstatus == 2" @click="JfwbDetailsBtn(scope.row)" plain type="primary" size="small">
                查看
              </el-button>

              <!-- 科研管理员 -->
              <el-button v-if="verifyRoleType.iskycgly() && (scope.row.checkstatus == -1 || scope.row.checkstatus == 3)" plain type="primary" size="small" @click="handleEdit(scope.row, '编辑1')">
                编辑
              </el-button>
              <el-button v-if="verifyRoleType.iskycgly() && (scope.row.checkstatus == -1 || scope.row.checkstatus == 3)" @click="JfwbDetailsBtn(scope.row)" plain type="primary" size="small">
                查看
              </el-button>
              <el-button v-if="verifyRoleType.iskycgly() && (scope.row.checkstatus == -1 || scope.row.checkstatus == 3)" type="danger" plain size="small" @click="handleDelete(scope.row)">
                删除
              </el-button>
              <el-button v-if="verifyRoleType.iskycgly() && scope.row.checkstatus == 1" plain type="primary" size="small" @click="handleEdit(scope.row, '编辑2')">
                编辑
              </el-button>
              <el-button v-if="verifyRoleType.iskycgly() && scope.row.checkstatus == 1" @click="JfwbDetailsBtn(scope.row)" plain type="primary" size="small">
                查看
              </el-button>
              <el-button v-if="verifyRoleType.iskycgly() && scope.row.checkstatus == 1 && scope.row.isAuditor" @click="openauditBtn(scope.row)" plain type="success" size="small">
                审核
              </el-button>
              <el-button v-if="verifyRoleType.iskycgly() && scope.row.checkstatus == 2" @click="JfwbDetailsBtn(scope.row)" plain type="primary" size="small">
                查看
              </el-button>
              <!--            <el-button  @click="openauditBtn(scope.row)">cs查看</el-button>-->



              <!--            <el-button v-if="!(verifyRoleType.isKymsOrkycgly() && scope.row.checkstatus == 2)" plain type="primary"  size="small" @click="handleEdit(scope.row)">编辑</el-button>-->
              <!--            <el-button  v-if="verifyRoleType.isKyry() && scope.row.checkstatus == '1'" plain type="warning" size="small" @click="handleCancel(scope.row)">撤销</el-button>-->
              <!--            <el-button v-if="scope.row.isAuditor"  @click="openauditBtn(scope.row)" plain  type="success" size="small">审核</el-button>-->
              <!--            <el-button  v-if="scope.row.checkstatus == -1 || scope.row.checkstatus == 3"  type="danger" plain size="small" @click="handleDelete(scope.row)">删除</el-button>-->
              <!--            <el-button v-if="scope.row.checkstatus == 2" @click="JfwbDetailsBtn(scope.row)" plain type="primary"-->
              <!--              size="small">查看</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <div class="example-pagination-block">
          <el-pagination layout="->,prev, pager, next, total" :total="total" currentPage1="10"
                         @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>

  </el-dialog>
  <JfwbDialogcompile ref="JfwbDialogcompileRef" :visible="JfwbDialogcompile" :projectOptions="projectOptions"
                     :compileRow="compileRow" :tableData="tableData" @getlist="getList" @save="handleSave"
                     @saveAndPass="handleSaveAndPass" @close="dialogVisible = false" @getselectVproject="getselectVproject" />
  <!-- 引入子组件 -->
  <JfwbDetails ref="JfwbDetailsRef" :visible="JfwbDialogcompile" :projectOptions="projectOptions"
               :compileRow="compileRow" :tableData="tableData" @getlist="getList" @save="handleSave"
               @saveAndPass="handleSaveAndPass" @close="dialogVisible = false" @getselectVproject="getselectVproject" />

  <audit ref="openaudit" @success="getselectVproject">
  </audit>
</template>

<script setup lang="ts">
// 定义关闭事件回调
const emits = defineEmits(['emptyData']); // 定义上抛事件

// 对话框关闭时的处理函数
const handleDialogClose = () => {
  if (tableData.value.length === 0) {
    emits('emptyData'); // 表格数据为空时上抛事件
  }
};
const loading = ref(false) // 添加加载状态
import {turnWanyuan} from "@/utils/money.js";
import {verifyRoleType} from "@/utils/main.js";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import useDictFetch from "@/hooks/useDictFetch";
import JfwbDialogcompile from "@/views/money/jfwb/JfwbDialogcompile.vue";
import JfwbDetails from "@/views/money/jfwb/JfwbDetails.vue";
const checkStatusList = useDictFetch("bpm_process_instance_status"); //审核状态
import {
  selectVproject,
  getProOutFeeInfo,
  list,
  remove
} from '@/api/money/jfwbApi.js'
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
const dialogVisible = ref(false);
const JfwbDialogcompileRef = ref(null)

import audit from  '@/views/money/audit.vue'
const openaudit = ref(null)
const openauditBtn = function (row){
  openaudit.value.openaudit(row)
}

const JfwbDetailsRef  = ref(null);
const JfwbDetailsBtn = (row) => {
// 这里可以添加实际的编辑逻辑，比如弹出编辑表单等
  //compileRow.value = row;
  JfwbDetailsRef.value.opencompileDialog(row);
}

// 处理编辑操作
const handleEdit = (row) => {
  // 这里可以添加实际的编辑逻辑，比如弹出编辑表单等
  //compileRow.value = row;
  JfwbDialogcompileRef.value.opencompileDialog(row);
};
//点击撤销
//撤销
import { cancelProcess } from "@/api/project/common";
const handleCancel = async (row) => {
  loading.value = true // 开始加载
  try {
    const res = await cancelProcess(row.processInstanceId);
    if (res.data) {
      ElMessage({
        message: "操作成功！",
        type: "success",
      });
      getList()
    } else {
      ElMessage({
        message: "操作失败！",
        type: "warning",
      });
    }
  } catch (error) {
    console.log(error);
  }finally {
    loading.value = false // 结束加载
  }
};
const getList = () => {
  getselectVproject()
}
const getselectVproject = function (){
  selectVproject({
    pageNum:1,
    pageSize:50,
    projectId:rowID.value
  })
      .then((res)=>{
        //projectOptions.value = res.rows
        projectInfo.value = res.rows[0]
        changeselect(rowID.value)
      })
}
// 处理删除操作
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '确认！删除这条数据?',
      '提醒',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        loading.value = true // 开始加载
        remove(row.id)
            .then((res)=>{
              if(res.code == 200){
                ElMessage({
                  type: 'success',
                  message: res.msg,
                })
                emits('emptyData');
                getList()
              }else {
                ElMessage({
                  type: 'info',
                  message: res.msg,
                })
              }
            })
      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
      })
      .finally(() => {
        loading.value = false // 结束加载
      })

};
const total = ref(0)
const changeselect =function (rowID){
  getProOutFeeInfo({projectId:rowID})
      .then((res)=>{
        projectInfo.value.projectOutboundList = res.data.projectOutboundList
      })
  list({
    pageNum: 1,
    pageSize: 50,
    projectId:rowID
  })
      .then((res)=>{
         total.value = res.total;
        tableData.value = res.rows

      })
}
// 模拟项目信息数据
const projectInfo = ref(
    {
      status:'-1',//保存传-1，保存并通过传2"
      //checkstatus:'-1',//保存传-1，保存并通过传2"
      projectId: '',
      outFee: '',//外拨总金额
      availableAllocatedAmount: '',
      outbounddate: new Date(),
      chargerName: '', //负责人名称
      isOutFee: '',//已拨经费
      outFeeIncheck: '',//外拨待审核金额
      notOutFee:'',//可外拨金额
      projectOutboundList:[
        {
          index: '',
          unitName: '',//合作单位名称
          chargerName: '',//负责人
          isOutFee: '', //已外拨(万元)
          notOutFee: '',//未外拨
          outboundFee: 0,//外拨经费(万元)
          bankName: '',//银行名
          bankNum: ''//卡号
        }],
    }
);
// 模拟表格数据
const tableData = ref([]);
// 清空所有信息的方法
const clearAllInfo = () => {
  // 重置 projectInfo
  projectInfo.value = {
    status: '-1',
    projectId: '',
    outFee: '',
    availableAllocatedAmount: '',
    outbounddate: new Date(),
    chargerName: '',
    isOutFee: '',
    outFeeIncheck: '',
    notOutFee: '',
    projectOutboundList: [
      {
        index: '',
        unitName: '',
        chargerName: '',
        isOutFee: '',
        notOutFee: '',
        outboundFee: 0,
        bankName: '',
        bankNum: ''
      }
    ]
  };
  // 重置 tableData
  tableData.value = [];
};
// 定义一个方法用于打开弹窗
const rowID = ref('')
const openDialogcompile = (row) => {
  rowID.value = row
  clearAllInfo(); // 在打开弹窗时调用清空方法
  dialogVisible.value = true;
  getselectVproject()
};
defineExpose({
  openDialogcompile
});
</script>
<style scoped lang="scss">

</style>